﻿@model List<FTBS.Models.Entities.Film>
@if (Model.Count() > 0)
{
    <div style="display: block;">
        @if (Model.Count > 0)
        {
            <div class="panel" style="display: table-cell; display: inline-block; background-color: white; margin-top: 20px; margin-left: 15px; width: 97.5%">
                <div class="container">
                    <div class="panel-header bg-lightBlue fg-white">
                        Phim đang được xem nhiều
                    </div>
                    <hr style="margin-top: 3px; background-color: black; height: 2px" />
                    <div>
                        @if (Model.Count > 0 && Model.Count <= 3)
                        {
                            for (int i = 0; i < Model.Count; i++)
                            {
                            <!-- Phim đầu tiên -->
                            <div style="display: inline-block; width: 30%">
                                <div class="image-container shadow" style="margin-left: 1%; border: solid; border-width: 1px;">
                                    <a href="/Home/Detail/@Model[i].FilmId">
                                        <img src="~/Image/FilmImage/@Model[i].ImageURL" style="width:100%;height:400px" onclick="countCategoryView(@Model[0].CategoryId)" />
                                        @if (@Model[i].IMDb > 7)
                                        {
                                            <div style="position: absolute; top: 1px; right: 1px;">
                                                <img src="~/Image/Icon/tag-blockbuster.png" />
                                            </div>
                                        }
                                    </a>
                                    <div class="overlay-fluid" style="width: 100%; padding-left: 12%; padding-top: 2%">
                                        <button class="small success" style="width:40%;font-size:16px;padding:3px" onclick ="Trailer('@Model[i].TrailerURL','@Model[i].Name')">Trailer</button>
                                        <button class="small warning" style="width: 40%; font-size: 16px; padding: 3px; margin-left: 20px" onclick="ChangeView()">Mua vé</button>
                                    </div>
                                </div>
                                <div>
                                    <h3 style="color: black; margin-left: 12px">@Model[i].Name</h3>
                                    <button class="button small info" style="font-size: 17px; margin-left: 12px;">@Model[i].Format.FormatName</button><br />
                                    <button class="button small info" style="font-size: 17px; margin-top: 10px; margin-left: 12px">@Model[i].Category.CategoryName</button><br />
                                </div>
                            </div>
                            }
                        }
                        else
                        {
                            <!-- Phim đầu tiên -->
                            <div style="display: inline-block; width: 25%">
                                <div class="image-container shadow" style="margin-left: 1%; border: solid; border-width: 1px;">
                                    <a href="/Home/Detail/@Model[0].FilmId">
                                        <img src="~/Image/FilmImage/@Model[0].ImageURL" style="width:100%;height:400px" onclick="countCategoryView(@Model[0].CategoryId)" />
                                        @if (@Model[0].IMDb > 7)
                                        {
                                            <div style="position: absolute; top: 1px; right: 1px;">
                                                <img src="~/Image/Icon/tag-blockbuster.png" />
                                            </div>
                                        }
                                    </a>
                                    <div class="overlay-fluid" style="width: 100%; padding-left: 12%; padding-top: 2%">
                                        <button class="small success" style="width:40%;font-size:16px;padding:3px" onclick ="Trailer('@Model[0].TrailerURL','@Model[0].Name')">Trailer</button>
                                        <button class="small warning" style="width: 40%; font-size: 16px; padding: 3px; margin-left: 20px" onclick="ChangeView()">Mua vé</button>
                                    </div>
                                </div>

                                <div>
                                    <h3 style="color: black; margin-left: 12px">@Model[0].Name</h3>
                                    <button class="button small info" style="font-size: 17px; margin-left: 12px;">@Model[0].Format.FormatName</button><br />
                                    <button class="button small info" style="font-size: 17px; margin-top: 10px; margin-left: 12px">@Model[0].Category.CategoryName</button><br />
                                </div>
                            </div>
                            <div style="display: inline-block; width: 74%; vertical-align: top">
                                @if (Model.Count >= 4)
                                {
                                    for (int i = 1; i < Model.Count; i++)
                                    {
                                    <div style="display: inline-block; width: 30%; margin-left: 2%; margin-top: 0px">
                                        <div class="image-container shadow" style="margin-left: 1%; border: solid; border-width: 1px;">
                                            <a href="/Home/Detail/@Model[i].FilmId">
                                                <img src="~/Image/FilmImage/@Model[i].ImageURL" style="width:100%;height:200px" onclick="countCategoryView(@Model[i].CategoryId)" />
                                                @if (@Model[i].IMDb > 7)
                                                {
                                                    <div style="position: absolute; top: 1px; right: 1px;">
                                                        <img src="~/Image/Icon/tag-blockbuster.png" />
                                                    </div>
                                                }
                                            </a>
                                            <div class="overlay-fluid" style="width: 100%; padding-left: 12%; padding-top: 2%">
                                                <button class="small success" style="width: 40%; font-size: 16px; padding: 3px"  onclick ="Trailer('@Model[i].TrailerURL','@Model[i].Name')">Trailer</button>
                                                <button class="small warning" style="width: 40%; font-size: 16px; padding: 3px; margin-left: 20px" onclick="ChangeView()">Mua vé</button>
                                            </div>
                                        </div>
                                        <div style="display: block; width: 100%; margin: 5px">

                                            <strong class="limitName" style="font-size: 15px; text-transform: uppercase; color: rgba(255, 0, 0, 0.89); text-align: left;">@Model[i].Name</strong>

                                            <div style="font-size: 17px; margin: 0px 12px 0px 0px; width: 80px; background-color: rgb(231, 184, 101); padding: 2px; border-radius: 2px; display: inline-block">IMDb: @Model[i].IMDb</div>
                                            <div class="lableN" style="vertical-align: top">@Model[i].Format.FormatName</div>
                                        </div>
                                    </div>                              
                                    }
                                }
                            </div>
                        }
                    </div>
                </div>
            </div>  
        }
    </div>
}
<script>
    function ChangeView() {
        window.location.href = "/Schedule"
    }
</script>
